<template>
  <q-page class="q-pa-md">
    <div style="position: relative; ">
      <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
        <el-icon style="cursor: pointer;" @click="router.go(-1)"><ArrowLeft /></el-icon>
        <q-breadcrumbs-el label="数据特征" />
      </q-breadcrumbs>
    </div>
    <div class="row">
      <el-form-item label="版本选择:" prop="adress" style="margin-right: 20px;">
        <el-select v-model="versionValue" class="m-2 selectBox" placeholder="请选择版本" size="small" style="width: 200px;"
          popper-append-to-body="false" popper-class="select-popper">
          <el-option v-for="(item, index) in versionSelectData" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="数据特征指标:" prop="adress">
        <el-select v-model="dataValue" class="m-2 selectBox" placeholder="请选择版本" size="small" style="width: 200px;"
          popper-append-to-body="false" popper-class="select-popper">
          <el-option v-for="(item, index) in dataSelect" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </div>
    <div class="row chartsBox">
      <div class="col">
        <div class="titleBox" style="margin-top: 20px;">
          清晰度
          <el-tooltip class="box-item" effect="light " content="说明说明" placement="right-start">
            <el-button
              style="transform: scale(.58);transform-origin:left ; margin:0 0 0 2px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip>
        </div>
        <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
      </div>
      <div class="col">
        <div class="titleBox" style="margin-top: 20px;">图片宽高比
          <el-tooltip class="box-item" effect="light " content="说明说明" placement="right-start">
            <el-button
              style="transform: scale(.58);transform-origin:left ; margin:0 0 0 2px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip>
        </div>
        <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
      </div>
      <div class="col">
        <div style="margin-top: 20px;">分辨率 <el-tooltip class="box-item" effect="light " content="说明说明" placement="right-start">
            <el-button
              style="transform: scale(.58);transform-origin:left ; margin:0 0 0 2px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip>
        </div>
        <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
      </div>
    </div>
    <div class="row chartsBox" >
      <div class="col">
        <div style="margin-top: 20px;">图片亮度 <el-tooltip class="box-item" effect="light " content="说明说明" placement="right-start">
            <el-button
              style="transform: scale(.58);transform-origin:left ; margin:0 0 0 2px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip></div>
        <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
      </div>
      <div class="col">
        <div style="margin-top: 20px;">图像色彩的丰富度 <el-tooltip class="box-item" effect="light " content="说明说明" placement="right-start">
            <el-button
              style="transform: scale(.58);transform-origin:left ; margin:0 0 0 2px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip></div>
        <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
      </div>
      <div class="col">
        <div style="margin-top: 20px;">图片饱和度 <el-tooltip class="box-item" effect="light " content="说明说明" placement="right-start">
            <el-button
              style="transform: scale(.58);transform-origin:left ; margin:0 0 0 2px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip></div>
        <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import chartLine from 'src/components/chartLine.vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const versionValue = ref('')
const dataValue = ref('')
const versionSelectData = ref(['111', '222', '333'])
const dataSelect = ref(['图片宽高比例', '清晰度', '分辨率', '色彩亮度', '图像色彩的丰富程度', '图片饱和度'])
const chastSize = reactive({
  width: '80%',
  height: "273px"
})
const chartOption2 = reactive({
  tooltip: {
    axisPointer: {
      type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
      crossStyle: {
        color: '#fff'
      }
    },
    trigger: 'axis',
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '5%',
    top: '8%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLine: { onZero: true },
    min: 0,
    position: 'bottom', // x轴位置在上方
    axisLabel: {
      interval: 19, //间隔的个数
    }
  },
  yAxis: {
    type: 'value',
    axisLine: { onZero: true },
    max: 10
  },
  series: [
    {
      name: 'GPU',
      data: [1, 0, 0, 0, 2, 1, 3, 0, 0, 0.3, 1, 2,
        0, 1, 1, 0, 0, 0, 2, 1, 9, 1, 1, 0, 0,
        0, 0, 0, 1, 2, 0, 1, 1, 2, 0, 0, 2,
        1, 1, 3, 0.9, 1, 2, 1, 1, 2, 0, 1, 2,
        1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0,
        0, 0, 0.1, 2, 0.7, 1, 1,1, 2, 0, 0, 0.3,
        1, 2, 0, 0, 1, 0, 0, 0, 0, 0, 1, 2, 0, 1, 1, 2, 0, 1,],
      color: 'rgb(108,174,235)',
      type: 'line',
      // symbolSize: 8,
      // smooth: true,
    }
  ]
})


</script>

<style scoped lang="scss">
.chartsBox {
  color: #333;
  text-align: center;
  .col{
    border-bottom: 1px dashed #ccc;
    border-right: 1px dashed #ccc;
    &:last-child{
      border-right: none;
    }
  }
  &:last-child{
    .col{

    }
  }
}
</style>
